<template>
	<el-dialog title="配置角色" :visible.sync="visible" append-to-body width="640px">
		<div class="sw_config_role" v-loading="loading">
			<div class="item" v-for="(item, index) in roleGroupData" :key="index">
				<h4>{{ item.label }}</h4>
				<el-checkbox-group v-model="item.checked">
					<el-checkbox v-for="(n, i) in item.children" :key="i" :label="n.id">{{ n.name }}</el-checkbox>
				</el-checkbox-group>
			</div>
		</div>
		<template slot="footer">
			<el-button size="medium" @click="visible = false">取消</el-button>
			<el-button size="medium" type="primary" :loading="btnLoading" @click="handleSubmitRole">确定</el-button>
		</template>
	</el-dialog>
</template>

<script>
import { mapGetters } from 'vuex';
import { getRoleList } from '@/api/system/tbSysRole';
import { getRoleByUser, addRolesByUser } from '@/api/system/tbSysUserRole';
export default {
	props: {
		value: {
			type: Boolean,
			default: false
		},
		userId: String
	},
	data() {
		return {
			loading: false,
			visible: this.value,
			roleListData: [],
			btnLoading: false,
			roleGroupData: [],
			originalChecked: []
		};
	},
	computed: {
		...mapGetters(['dictEnums'])
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		async visible(flag) {
			this.$emit('input', flag);
			if (!flag) return false;
			this.loading = true;
			await this.getRoleData();
			await this.getCheckedRole();
			this.loading = false;
		},
		roleListData(arr) {
			this.roleGroupData = this.dictEnums['ROLE_TYPE'].map((item) => {
				let typeRoleArr = arr.filter((n) => n.type === item.value);
				let checkedRoleArr = typeRoleArr.filter((n) => !!n.checked).map((n) => n.id);
				return { label: item.msg, value: item.value, checked: checkedRoleArr, children: typeRoleArr };
			});
		}
	},
	methods: {
		//获取角色数据
		async getRoleData() {
			let params = { page: 1, limit: 9999 };
			let result = await getRoleList(params).then((res) => res.data);
			if (result.code === '0') {
				this.roleListData = !result.data ? [] : result.data;
			}
		},

		//获取选中角色
		async getCheckedRole() {
			let result = await getRoleByUser(this.userId).then((res) => res.data);
			if (result.code === '0') {
				let datas = !result.data ? [] : result.data;
				this.originalChecked = datas;
				this.roleListData = this.roleListData.map((item) => {
					let obj = { ...item };
					obj['checked'] = datas.some((n) => n.id === item.id);
					return obj;
				});
			}
		},

		//提交
		async handleSubmitRole() {
			let params = { userId: this.userId };
			let curChecked = this.roleGroupData.reduce((prev, cur) => {
				prev = [...prev, ...cur.checked];
				return prev;
			}, []);
			let originalChecked = this.originalChecked.map((item) => item.id);
			let diffChecked = this.$getArrDifference(curChecked, originalChecked);
			params['roleList'] = diffChecked.map((item) => {
				let obj = { relId: item };
				if (originalChecked.indexOf(item) === -1) {
					obj['operType'] = '1';
				} else {
					obj['operType'] = '2';
				}
				return obj;
			});
			this.btnLoading = true;
			await this.updateSelectedRole(params);
			this.btnLoading = false;
		},

		//更新选中角色
		async updateSelectedRole(params) {
			let result = await addRolesByUser(params).then((res) => res.data);
			if (result.code === '0') {
				this.visible = false;
				this.$showCustomMessage('success', `更新选中角色成功`);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.sw_config_role {
	width: 100%;
	.item {
		padding: 10px;
		h4 {
			font-weight: bold;
			margin-bottom: 10px;
		}
	}
}
</style>
